import React,{memo,useState,useEffect} from 'react'
import { Button, Collapse, CollapseProps, Dropdown, Input, MenuProps, Modal } from 'antd'
import ItemList from './itemList'
import CheckboxList from './checkboxList'
import UserCheckboxList from './userCheckbox'

function  UserlTool(props, ref){
  const [isModalOpen, setIsModalOpen] = useState(false);
  let item = new Date().getTime();
  let arr =  [
    {
      label:"好友名1",
      uid:1,
      avatar:'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
      checked:false,
      pid:0,
      key:1+item
    },
    {
      label:"好友名2",
      uid:2,
      avatar:"https://img.zcool.cn/community/01e96f55451e4d0000019ae99de4d1.jpg@1280w_1l_2o_100sh.jpg",
      checked:false,
      pid:1,
      key:2+item
    },
    {
      label:"好友名3",
      uid:3,
      avatar:"https://img.zcool.cn/community/01e96f55451e4d0000019ae99de4d1.jpg@1280w_1l_2o_100sh.jpg",
      checked:false,
      pid:2,
      key:3+item
    },
    {
      label:"好友名4",
      uid:4,
      avatar:"https://img.zcool.cn/community/01e96f55451e4d0000019ae99de4d1.jpg@1280w_1l_2o_100sh.jpg",
      checked:false,
      pid:0,
      key:4+item
    },

  ]
  const [userList,setUserList] = useState<any>([])
  const checkItem = (item:any) =>{
    userList[item] = item
    setUserList([...userList]);
  }
  const  viewsItem = (id,i)=>{
       console.log(userList)
    let im = userList
    let list = im.map((item,i)=>
      item.pid === id? <CheckboxList onCheckbox={(e)=>checkItem(e)} props={item} key={item.key}></CheckboxList>:"" )
    return <div>
      {list}
    </div>
  }

  const chencItem = ()=>{
    let im = userList
    let list = im.map((item,i)=> item.checked ?
      <UserCheckboxList onCheckbox={(e)=>checkItem(e)} props={item} key={item.key}></UserCheckboxList> : "" );
    return <div>
      {list}
    </div>
  }

  const showModalFun = ()=>{
    setUserList(arr);
    setIsModalOpen(true);
    console.log(userList)
  }

  const showSouSuo = ()=>{
    window.electron.ipcRenderer.send("open-sousuo","/sousuo")
  }





  const items: ({ label: JSX.Element; key: string } )[] = [
    {
      key: '1',
      label: (
        <div onClick={()=>showModalFun()} className="but-item">
          <i className="iconfont mt-roundadd"></i>
          <p>发起群聊</p>
        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div className="but-item" onClick={()=>showSouSuo()}>
          <i className="iconfont mt-friendadd"></i>
          <p>加好友/群</p>
        </div>
      ),
    },
  ]
  const items2: CollapseProps['items'] = [
    {
      key: '1',
      label: '我的设备',
      children: viewsItem(0,0),
      extra: <div className="shuzhi">0/10</div>,
    },
    {
      key: '2',
      label: '特别关心',
      children: viewsItem(1,1),
      extra: <div className="shuzhi">0/10</div>,

    },
    {
      key: '3',
      label: '我的好友',
      children: viewsItem(2,2),
      extra: <div className="shuzhi">0/10</div>,

    },
  ];
  const BlurFun = ()=>{
    props.blurFun(false)
  }
  const inputChange = (e)=>{
    props.inputChange(e.currentTarget.value)
  }
  const FocudFun = ()=>{
    props.FocudFun(true)
  }



  return <>
    <div className="meun-t-tool"></div>
    <div className="meun-b-box">
      <div className="meun-input-box">
        <div className="meun-input">
          <Input
            onFocus={()=>FocudFun()}
            onChange={(e)=>inputChange(e)}
            onBlur={()=>BlurFun()}
            prefix={<i className="iconfont mt-31sousuo" style={{ color: 'rgba(0,0,0,.25)' }} />}
            size="small"
            allowClear
            placeholder="搜索" />
        </div>
        <div className="meun-button">
          <Dropdown menu={{ items }} trigger={['click']} placement="bottomLeft">
            <Button
              size="small"
              className="meun-button-icon"
              icon={<i className="iconfont mt-add" />} />
          </Dropdown>

        </div>
      </div>
    </div>


    <Modal className="meun-Model"
           closable={false}
           footer={null}
           open={isModalOpen}
           width={560}
           maskClosable={false}
           onCancel={()=>setIsModalOpen(false)}>
      <div className="model-main">
             <div className="model-main-l">
               <div className="model-l-top">
                 <Input
                   prefix={<i className="iconfont mt-31sousuo" style={{ color: 'rgba(0,0,0,.25)' }} />}
                   size="small"
                   allowClear
                   placeholder="搜索" />
               </div>
               <div className="model-l-box">
                 <Collapse
                   defaultActiveKey={['1']}
                   ghost
                   size="small"
                   items={ items2}
                 />
               </div>
             </div>
            <div className="model-main-r">
               <div className="model-r-text">创建群聊</div>
               <div className="model-r-c">
                 {chencItem()}
               </div>
              <div className="model-r-b">
                <Button type="primary">确认</Button>
                <Button onClick={()=>setIsModalOpen(false)}>取消</Button>
              </div>
            </div>

      </div>

    </Modal>

  </>

}

export default  memo(UserlTool);
